<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    {{name}}
    <input type="text" v-model="name">
    <input type="text" :value="name">

    <!--向所在的标签渲染文本-->
    <div v-text="name">555</div>
    <div v-text="str">555</div>
    <!--将文本中的标签识别并放入所在标签中-->
    <div v-html="str">555</div>

    <h2>{{n}}</h2>
    <!--在第一次渲染标签后 值编程静态的-->
    <h2 v-once>{{n}}</h2>
    <button @click="n++">n+1</button>

    <!--将当前标签跳过编译过程 一般没有经过Vue渲染的可以使用 加快编译速度-->
    <h1 v-pre>你好，我是一段没有使用到变量的固定内容</h1>

</div>
<script>
    new Vue({
        el:'#app',
        data(){
            return{
                name:'zs',
                str:'<h1>你好</h1>',
                n:0
            }
        }
    });
</script>

</body>
</html>